<head>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <%@ taglib prefix="security" uri="http://www.springframework.org/security/tags"%>

    <script type="text/javascript"
            src="<%=request.getContextPath()%>/script/hover_button.js"></script>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/script/listdialogs.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            sort();
            initDisplayMode();
            $("#previewBtn").click(function () {
                if (select_id == "") {
                    alert("please select one to preview!");
                } else {
                    $.get("preview.html", {qnId: select_id, seq: "1"}, function (data) {
                        if ($("select")[0]) $("select").hide(); // fix the dropdown can be not coverd in IE6 - W.P
                        $("#preview").show();
                        $("#previewContent").html(data);
                    });
                }
            });
        });
    </script>
</head>

<!-- Menu -->
<jsp:include page="menu.jsp" />
<!--START: conent -->
<div class="content">
    <div class="insider">
        <div class="search_box">
            <form id="search" action="search.html">
                <ul class="fl">
                    <li>
                        <select name="function" id="Function" class="select1">
                            <option value="">
                                Function:All
                            </option>
                            <c:forEach var="function" items="${functions}">
                                <option value="${function.code}"
                                        <c:if test="${function.code eq param.function}">selected</c:if>>
                                    ${function.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li>
                        <select name="productType" id="ProductType" class="select1">
                            <option value="">
                                Product Line:All
                            </option>
                            <c:forEach var="productType" items="${productTypes}">
                                <option value="${productType.code}"
                                        <c:if test="${productType.code eq param.productType}">selected</c:if>>
                                    ${productType.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>

                    <security:authorize ifAnyGranted="ROLE_SYS_ADMIN">
                        <li>
                            <select name="group" id="Group" class="select1">
                                <option value="">
                                    Group:All
                                </option>
                                <c:forEach var="group" items="${groups}">
                                    <option value="${group.name}"
                                            <c:if test="${group.name eq param.group}">selected</c:if>>
                                        ${group.name}
                                    </option>
                                </c:forEach>
                            </select>
                        </li>
                    </security:authorize>


                    <li>
                        <select name="status" id="Status" class="select1">
                            <option value="">
                                Status:All
                            </option>
                            <option value="inprocess" ${"inprocess" eq param.status ? 'selected' : ''}>
                                In Process
                            </option>

                            <option value="retired" ${"retired" eq param.status ? 'selected' : ''}>
                                Retired
                            </option>

                            <option value="published" ${"published" eq param.status ? 'selected' : ''}>
                                Published
                            </option>
                        </select>
                    </li>
                    <li>
                        <select name="region" id="Region" class="select1">
                            <option value="">
                                Region:All
                            </option>
                            <c:forEach var="region" items="${regions}">
                                <option value="${region.code}"
                                        <c:if test="${region.code eq param.region}">selected</c:if>>
                                    ${region.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li>
                        <select name="locale" id="Locale" class="select1">
                            <option value="">
                                Locale:All
                            </option>
                            <c:forEach var="locale" items="${locales}">
                                <option value="${locale.code}"
                                        <c:if test="${locale.code eq param.locale}">selected</c:if>>
                                    ${locale.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>

                    <security:authorize ifNotGranted="ROLE_PORTAL_USER">
                        <li>
                            <select name="user" id="User">
                                <option value="">
                                    User:All
                                </option>
                                <c:forEach var="user" items="${users}">
                                    <option value="${user.username}"
                                            <c:if test="${user.username eq param.user}">selected</c:if>>
                                        ${user.username}
                                    </option>
                                </c:forEach>
                            </select>
                        </li>
                    </security:authorize>

                    <li>
                        <input name="keywords" style="font-size:16px;" class="keywords" type="text" id="keyword"
                               value="${empty param.keywords ? 'Search by Keywords...' : param.keywords}" />
                    </li>
                </ul>
                <ul class="fr">

                    <li>
                        <input class="btn" type="image" name="search_bt" id="search_bt"
                               src="<%=request.getContextPath()%>/images/btn/btn_search3.gif" />
                    </li>
                </ul>
            </form>
        </div>
        <div class="error">
            <h3>
                ${error}
                <br>
                ${message}
            </h3>
            <div class="display_mode">
                <h4>
                    Display mode:
                </h4>
                <ul>
                    <li id="brief" onclick="briefMode();">
                        <a href="#">Brief</a>
                    </li>
                    <li class="active" id="full" onclick="fullMode();">
                        <a href="#">Full</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="functions2">
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li class="fr">
                    <a href="create.html" class="retire"><img
                            src="<%=request.getContextPath()%>/images/btn/btn_create_new.gif"
                            width="127" height="21" alt="Create new Dialogs" class="btn" />
                    </a>
                </li>
            </security:authorize>
            <li class="view">
                <a href="#" id="viewdialog"><img
                        src="<%=request.getContextPath()%>/images/btn/functions2/btn_view.gif"
                    width="68" height="23" alt="view dialogs" class="btn" /> </a>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" id="editdialog">
                        <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit.gif"
                         alt="edit dialog" class="btn" /> </a>
                </li>
                <li>
                    <a href="#" id="newversiondialog"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_new_version.gif"
                            width="142" height="23" alt="new version dialog" class="btn" />
                    </a>
                </li>
                <li>
                    <a href="#" id="deletedialog"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_delete.gif"
                        width="86" height="23" alt="delete dialog" class="btn" /> </a>
                </li>
                <li>
                    <a href="#" id="copydialog"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_copy.gif"
                        width="68" height="23" alt="copy dialog" class="btn" /> </a>
                </li>
                <li><a href="#" id="replicatedialog"><img src="<%= request.getContextPath()%>/images/btn/functions1/btn_replicate.gif" alt="replicate dialog" width="122" height="23" class="btn" /></a></li>
            </security:authorize>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_REVIEWER">
                <li>
                    <a href="#" id="retiredialog" class="retire"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_retire.gif"
                        width="86" height="23" alt="retire dialog" class="btn" /> </a>
                </li>
                <li>
                    <a href="#" id="publishdialog" class="publish"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_publish.gif"
                        width="122" height="23" alt="publish dialog" class="btn" /> </a>
                </li>
            </security:authorize>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" id="exportXMI">
                        <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_generate_xmi.gif"
                             alt="Export XMI" class="btn" />
                    </a>
                </li>
                <li>
                    <a href="#" id="previewBtn">
                        <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_preview.gif"
                             alt="preview dialog" class="btn" />
                    </a>
                </li>
            </security:authorize>
        </ul>
        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
                <tr>
                    <c:set var="column" value="${param.sortColumn}" />
                    <c:set var="order" value="${param.sortBy}" />
                    <th width="15%" column="name" class="${(column == 'name' and order=='asc')?'id_move_up' : (column == 'name' and order=='desc')?'id':''} sort">
                        Name
                    </th>
                    <th width="11%" column="refId" class="${(column == 'refId' and order=='asc')?'id_move_up' : (column == 'refId' and order=='desc')?'id':''} sort">
                        ID
                    </th>
                    <th width="10%" column="version" class="${(column == 'version' and order=='asc')?'id_move_up' : (column == 'version' and order=='desc')?'id':''} sort">
                        Version
                    </th>
                    <th width="13%" column="publicationStatus.code" class="${(column == 'publicationStatus.code' and order=='asc')?'id_move_up' : (column == 'publicationStatus.code' and order=='desc')?'id':''} sort">
                        Status
                    </th>
                    <th width="51%" column="description" class="${(column == 'description' and order=='asc')?'id_move_up' : (column == 'description' and order=='desc')?'id':''} end sort">
                        Description
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="data_tbody" id="dataList">
            <c:forEach var="dialog" items="${dialogs}">
                <div onclick="Active(this,${dialog.questionnaireId},'${dialog.publicationStatus.code}');"
                     onmouseover="itemHover(this);" onmouseout="itemMouseOut(this);"
                     id="${dialog.questionnaireId}">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                            <tr>
                            	<td width="15%" class="id_number">
                                    ${dialog.name}
                                </td>
                                <td width="11%" class="id_number">
                                    ${dialog.refId}
                                </td>
                                <td width="10%">
                                    ${dialog.version}
                                </td>
                                <td width="13%">
                                    ${dialog.publicationStatus.code}
                                </td>
                                <td width="51%">
                                    ${dialog.listmodeDescription}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="tro"></td>
                            </tr>
                        </tbody>
                    </table>
                    <table border="0" cellspacing="0" class="tro" width="800">
                        <tr>
                            <td width="160">
                                Function:
                                <strong>${dialog.function.code}</strong>
                            </td>
                            <td width="150">
                                User:
                                <strong>${dialog.modifiedBy.username}</strong>
                            </td>
                            <td width="220">
                                Last modified:
                                <strong><fmt:formatDate value="${dialog.modifiedOn}"
                                                        type="date" pattern="MM/dd/yyyy" /> </strong>
                            </td>
                            <td width="200" class="end">
                                Name:
                                <strong>${dialog.name}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Region:
                                <strong>${dialog.region.code}</strong>
                            </td>
                            <td>
                                Product:
                                <strong> ${dialog.productType.code}</strong>
                            </td>
                            <td>
                                Locale:
                                <strong>${dialog.locale.code}</strong>
                            </td>
                            <td class="end">
                                 Vocabulary Name:
                                <strong>${dialog.vocabularyname}</strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>
        <!-- Pagination -->
        <%@include file="../../template/pager.jsp" %>
    </div>
</div>
<!--END: conent -->

<jsp:include page="previewFrame.jsp" />